<template>
	<view class="e-p-l-20 e-p-r-20 e-p-b-30">
		<view class="e-p-l-10 e-p-r-10 e-p-t-20 e-p-b-26 e-flex e-flex-items-start ">
			<text class="e-line-h-44">{{ item.itemIndex }}.</text>
			<view class="e-flex-1">
				<rich-text :nodes="item.title"></rich-text>
			</view>
		</view>
		<template v-if="item.fileList?.length">
			<view class="e-p-t-18 e-p-b-18 e-p-l-20 e-p-r-20 e-flex bg-white" v-for="file in item.fileList" :key="file.url">
				<view class="e-m-r-20">
					<image class="img-32" src="/static/layoutForm/pdf.png" v-if="file.type === 'pdf'" />
					<image class="img-32" src="/static/layoutForm/docx.png" v-else-if="file.type === 'docx' || file.type === 'doc'" />
					<image class="img-32" src="/static/layoutForm/ppt.png" v-else-if="file.type === 'ppt' || file.type === 'pptx'" />
					<image class="img-32" src="/static/layoutForm/jpeg.png" v-else-if="file.type === 'jpeg'" />
					<image class="img-32" src="/static/layoutForm/jpg.png" v-else-if="file.type === 'jpg'" />
					<image class="img-32" src="/static/layoutForm/png.png" v-else-if="file.type === 'png'" />
					<image class="img-32" src="/static/layoutForm/xls.png" v-else-if="file.type === 'xls' || file.type === 'xlsx'" />
					<image class="img-32" src="/static/layoutForm/mp3.png" v-else-if="file.type === 'mp3'" />
					<image class="img-32" src="/static/layoutForm/mp4.png" v-else-if="file.type === 'mp4'" />
				</view>
				<view class="e-line-1 e-flex-1">
					<text class="c-secondary">{{ file.name }}</text>
				</view>
			</view>
		</template>
		<view class="e-p-t-18 e-p-b-18 e-p-l-20 e-p-r-20 bg-white" v-else>
			<text :class="[empty(item.vle) && 'c-secondary']">
				{{ empty(item.vle) ? '--' : item.vle }}
			</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import type { LayoutFormModelValueItem, GoodsFormOption } from '@/typings';
import { empty } from '@/common/utils';
type FormItemOption = GoodsFormOption & {
	vle: string;
	fileList?: LayoutFormModelValueItem['fileList'];
	itemIndex: number;
};
const props = defineProps<{
	item: FormItemOption;
}>();
</script>

<style></style>
